<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
import openLayers from '@/components/common/map.vue';
import { smtLayCameraCount, Grids, downLoadCameras } from '@/utils/api.js'
let gridid = [];
let allGrid = [];
const value1 = ref('');
const ol = ref(null);
const scobj = ref({});
const gridMap = ref({});
const layerType = ref('全部');
let areaId = "";
const typelist = [
    {
        id: "fnsjkfs02391",
        value: "wgCount",
        label: "全部"
    },
    {
        id: "fnsjkfs02392",
        value: "deviceCount",
        label: "实时相机"
    },
    {
        id: "fnsjkfs02393",
        value: "cameraCount",
        label: "红外相机"
    }
]

const wlscolrs = [
    {
        id: "colors1",
        value: "0-2次",
        label: "0-2次",
        color: '#FDD835'
    },
    {
        id: "colors2",
        value: "2-4次",
        color: '#FFCA28'
    },
    {
        id: "colors3",
        value: "4-6次",
        color: '#FFB300'
    },
    {
        id: "colors4",
        value: "6-8次",
        color: '#FF8F00'
    },
    {
        id: "colors5",
        value: "8-10次",
        color: '#F57C00'
    },
    {
        id: "colors6",
        value: "10-12次",
        color: '#F4511E'
    },
    {
        id: "colors7",
        value: "12次以上",
        color: '#C51062'
    }
]
const drawbar = (demo, dbd, lay4gNum, layCameraNum, recycle4gNum, recycleCameraNum) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: dbd
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '布设实时相机',
                type: 'bar',
                data: lay4gNum
            },
            {
                name: '布设红外相机',
                type: 'bar',
                data: layCameraNum
            },
            {
                name: '回收实时相机',
                type: 'bar',
                data: recycle4gNum
            },
            {
                name: '回收红外相机',
                type: 'bar',
                data: recycleCameraNum
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });
}

const formatProcessingTime = (data) => {
    if (data != null && data != '') {
        let t1 = new Date(data[0]);
        let year = t1.getFullYear();
        let month = (t1.getMonth() + 1) > 9 ? (t1.getMonth() + 1) : '0' + (t1.getMonth() + 1);
        let date = t1.getDate() > 9 ? t1.getDate() : '0' + t1.getDate();

        let t2 = new Date(data[1]);
        let year2 = t2.getFullYear();
        let month2 = (t2.getMonth() + 1) > 9 ? (t2.getMonth() + 1) : '0' + (t2.getMonth() + 1);
        let date2 = t2.getDate() > 9 ? t2.getDate() : '0' + t2.getDate();

        return year + "-" + month + "-" + date + '~' + year2 + "-" + month2 + "-" + date2;
    } else {
        return ""
    }
}

const FilterColor = (data) => {
    let color = '';
    if (data == undefined) {
        color = 'rgba(255, 255, 255, 0.1)';
    } else {
        switch (true) {
            case (data > 12):
                color = '#C51062';
                break;
            case (data >= 10 && data < 12):
                color = '#F4511E';
                break;
            case (data >= 8 && data < 10):
                color = '#F57C00';
                break;
            case (data >= 8 && data < 10):
                color = '#F57C00';
                break;
            case (data >= 6 && data < 8):
                color = '#FF8F00';
                break;
            case (data >= 4 && data < 6):
                color = '#FFB300';
                break;
            case (data >= 2 && data < 4):
                color = '#F57C00';
                break;
            case (data >= 0 && data < 2):
                color = '#FDD835';
                break;
            default:
                break;
        }
    }
    return color;
};


const getsmtLayCameraCount = async () => {
    let params = '?areaId=' + areaId + '&timeStr=' + formatProcessingTime(value1.value);
    let res = await smtLayCameraCount(params)
    if (res.code == '200') {
        scobj.value = res.data;

        let dbd = [], lay4gNum = [], layCameraNum = [], recycle4gNum = [], recycleCameraNum = [];
        res.data.siteCountArr.forEach(e => {
            dbd.push(e.siteName);
            lay4gNum.push(e.lay4gNum);
            layCameraNum.push(e.layCameraNum);
            recycle4gNum.push(e.recycle4gNum);
            recycleCameraNum.push(e.recycleCameraNum);
        })
        drawbar('chart', dbd, lay4gNum, layCameraNum, recycle4gNum, recycleCameraNum);

        gridMap.value = res.data.wgCount
        getGrids();
    }
}

const getGrids = async () => {
    let res = await Grids(areaId)
    if (res.code == '200') {
        allGrid = res.data;
        drawGrid();
    }
}

const drawGrid = () => {
    allGrid.forEach((e, x) => {
        let z = [{
            id: e.id,
            name: e.gridNumber,
            textColor: "#a78839",
            borderColor: "#F71C1C",
            fillColor: FilterColor(gridMap.value[e.gridNumber]),
            data: {},
            geojson: e.geojson
        }]
        ol.value.addGeoJson(z, e.id);
        gridid.push(e.id);
    })
}

const qhtype = (data) => {
    layerType.value = data.label;
    gridMap.value = scobj.value[data.value];
    drawGrid();
}

const chaget = () => {
    layerType.value = '全部';
    getsmtLayCameraCount()
}

const downloadFile = () => {
    const downloadLink = document.createElement('a');
    downloadLink.href = '/iapi/export/downLoadCameras?areaId=' + areaId + '&date=' + formatProcessingTime(value1.value) + '&type=&userNames='; // 替换为你要下载的文件链接
    downloadLink.download = '红外相机生境信息表.xls'; // 替换为你要下载的文件名
    downloadLink.target = '_blank';
    downloadLink.click();
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    ol.value.initmap();
    getsmtLayCameraCount();
})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title" style="justify-content: space-between;">
            <div style="font-weight: 700;"><span>布设情况统计</span></div>
        </div>

        <div class="ly_box dbx">
            <el-row justify="space-between">
                <el-col :span="4">
                    <el-date-picker v-model="value1" @change="chaget()" style="width: 4rem;" type="daterange"
                        range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" size="large" />
                </el-col>
                <el-col :span="4" style="text-align: end;">
                    <el-button type="primary" @click.stop="downloadFile()">导出</el-button>
                </el-col>
            </el-row>

            <div class="bs_d1">
                <div style="flex: 1;margin-right: 0.16rem;">
                    <div class="bstile">总览</div>
                    <div>
                        <div>
                            <div style="margin-bottom: 0.24rem;">
                                <span style="font-size: 0.18rem;color: #606266;font-weight: 700;">总计布设</span>
                                <span style="font-size: 0.32rem;color: var(--wls-color);font-weight: 700;">{{ scobj.laySum
                                }}</span>
                            </div>
                            <div style="margin-bottom: 0.16rem;">
                                <span style="font-size: 0.16rem;color: #AAA;font-weight: 700;">布设实时相机</span>
                                <span style="font-size: 0.24rem;color: #333;">{{ scobj.lay4gNum }}</span>
                            </div>
                            <div>
                                <span style="font-size: 0.16rem;color: #AAA;font-weight: 700;">布设红外相机</span>
                                <span style="font-size: 0.24rem;color: #333;">{{ scobj.layCameraNum }}</span>
                            </div>
                        </div>
                        <div>
                            <div style="margin-bottom: 0.24rem;">
                                <span style="font-size: 0.18rem;color: #606266;font-weight: 700;">总计回收</span>
                                <span style="font-size: 0.32rem;color: #FCD60F;font-weight: 700;">{{ scobj.recycleSum
                                }}</span>
                            </div>
                            <div style="margin-bottom: 0.16rem;">
                                <span style="font-size: 0.16rem;color: #AAA;font-weight: 700;">回收实时相机</span>
                                <span style="font-size: 0.24rem;color: #333;">{{ scobj.recycle4gNum }}</span>
                            </div>
                            <div>
                                <span style="font-size: 0.16rem;color: #AAA;font-weight: 700;">回收红外相机</span>
                                <span style="font-size: 0.24rem;color: #333;">{{ scobj.recycleCameraNum }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex: 2;">
                    <div class="bstile">各站布设情况</div>
                    <div style="height: calc(100% - .4rem);background-color: #F5F7FA;" id="chart"></div>
                </div>
            </div>

            <div class="bs_d2">
                <div class="bstile">布设分布图</div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-button v-for="(i, index) in typelist" :key="i.id" @click="qhtype(i)"
                            :style="layerType == i.label ? 'background-color: var(--wls-color);color: #fff;' : ''">{{
                                i.label
                            }}</el-button>
                    </el-col>
                </el-row>

                <div class="mapbox">
                    <open-layers ref="ol" />
                    <div class="wls_legend">
                        <div style="font-weight: 700;">网格分布图</div>
                        <div class="wls_leg" v-for="(i, index) in wlscolrs" :key="i.id">
                            <span :style="{ backgroundColor: i.color }"></span>
                            <span>{{ i.value }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.ly_box {
    width: 100%;
    height: calc(100% - .3rem);
    padding: 0.1rem;
    overflow: auto;
}

.bs_d1 {
    width: 100%;
    height: 3rem;
    margin-top: 0.16rem;
    display: flex;
}

.bs_d1>div {
    padding: 0.24rem;
    background-color: #fff;
}

.bs_d1>div:nth-child(1)>div:nth-child(2) {
    width: 100%;
    height: calc(100% - .4rem);
    display: flex;
    justify-content: space-between;
}

.bs_d1>div:nth-child(1)>div:nth-child(2)>div {
    width: calc((100% - 0.24rem) / 2);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bs_d1>div:nth-child(1)>div:nth-child(2)>div>div {
    display: flex;
    align-items: center;
}

.bs_d1>div:nth-child(1)>div:nth-child(2)>div>div span {
    margin-right: 0.16rem;
}

.bs_d1>div:nth-child(1)>div:nth-child(2)>div:nth-child(1) {
    border-left: 4px solid var(--wls-color);
    background-image: url('../assets/images/bs.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bs_d1>div:nth-child(1)>div:nth-child(2)>div:nth-child(2) {
    border-left: 4px solid #FCD60F;
    background-image: url('../assets/images/hs.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.bstile {
    font-weight: 700;
    margin-bottom: 0.16rem;
    overflow: hidden;
}

.bs_d2 {
    width: 100%;
    padding: 0.24rem;
    margin-top: 0.16rem;
    background-color: #fff;
    overflow: hidden;
}

.mapbox {
    width: 100%;
    height: 8rem;
    position: relative;
    margin-top: 0.16rem;
}

.dbx::-webkit-scrollbar {
    width: 0;
    /* 隐藏垂直滚动条 */
}

.dbx::-webkit-scrollbar-horizontal {
    display: none;
}

/* 隐藏垂直滚动条（如果有） */
.dbx::-webkit-scrollbar-vertical {
    display: none;
}

/* 隐藏滚动条的滑块 */
.dbx::-webkit-scrollbar-thumb {
    background: transparent;
}

.wls_legend {
    width: 1.3rem;
    padding: 0.16rem;
    color: #fff;
    border-radius: 8px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    background: rgba(0, 0, 0, 0.60);
}

.wls_leg {
    width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.wls_leg>span:nth-child(1) {
    width: .15rem;
    height: 0.15rem;
    margin-right: 8px;
    border-radius: 50%;
}
</style>